<template>
  <div class="productRecommendPc">
    <img class="title" src="../assets/image/home/title.png" />

    <!-- 一级分类 -->
    <tabs class="tabs" :list="data" :type="1" @change="tabsChange"></tabs>
    <!-- 二级分类 -->
    <tabs
      class="tabs-child"
      :children="data?.[tabIndex]?.children"
      :type="2"
      @change="tabsChildChange"
      :i="productIndex"
    ></tabs>
    <!-- 搜索 -->
    <div class="search-box">
      <div class="input-box">
        <img class="ic" src="../assets/image/header/ic_search.png" />
        <input
          class="input"
          v-model="search"
          placeholder="搜一搜查询您想要的产品"
        />
      </div>
      <div class="btn" @click="searchBtn">搜索</div>
    </div>

    <div class="product-box">
      <div class="left">
        <!-- <video class="video" v-if="currentVideo" :poster="currentVideoimage" controls>
        <source :src="currentVideo" type="video/mp4" />
      </video> -->
        <!-- <video-player v-if="currentVideo" class="video-player vjs-custom-skin img" ref="videoPlayer"
          :options="playerOptions">
        </video-player> -->
        <!-- 有视频显示视频 -->
        <img
          class="img"
          v-if="!currentVideo.file && currentVideo.image"
          :src="currentVideo.image"
        />
        <video
          ref="videoRef"
          class="left"
          v-if="currentVideo.file"
          :key="currentVideo.id"
          controls
          :poster="currentVideo.videoImg"
        >
          <source :src="currentVideo.file" type="video/mp4" />
        </video>
      </div>

      <div class="right">
        <swiper
          :slidesPerView="3"
          centeredSlides
          loop
          @slideChange="slideChange"
          class="productDetail"
          :navigation="{
            nextEl: '.productDetail-button-next',
            prevEl: '.productDetail-button-prev',
          }"
          v-if="product?.length > 0"
        >
          <swiper-slide v-for="item in product" :key="item.id">
            <div class="productDetail-item">
              <router-link
                class="productDetail-link"
                :to="{ name: 'productDetail', query: { id: item.id } }"
              >
                <img class="productDetail-item-img" :src="item.images" />
                <div class="productDetail-item-label">
                  {{ item.name }}
                </div>
              </router-link>
            </div>
          </swiper-slide>

          <template #container-start>
            <div class="productDetail-button productDetail-button-next"></div>
            <div class="productDetail-button productDetail-button-prev"></div>
          </template>
        </swiper>
      </div>
    </div>
  </div>
  <div class="productRecommendMobile">
    <img class="title" src="../assets/image/home/title.png" />
    <!-- 一级分类 -->
    <tabs class="tabs" :list="data" :type="1" @change="tabsChange"></tabs>
    <!-- 二级分类 -->
    <tabs
      class="tabs-child"
      :children="data?.[tabIndex]?.children"
      :type="2"
      @change="tabsChildChange"
      :i="productIndex"
    ></tabs>
    <!-- 搜索 -->
    <div class="search-box">
      <div class="input-box">
        <img class="ic" src="../assets/image/header/ic_search.png" />
        <input
          class="input"
          v-model="search"
          placeholder="搜一搜查询您想要的产品"
        />
      </div>
      <div class="btn" @click="searchBtn">搜索</div>
    </div>

    <div class="product-box">
      <div class="left">
        <!-- 有视频显示视频 -->
        <img class="img" v-if="!currentVideo.file" :src="currentVideo.image" />
        <video
          class="video"
          v-if="currentVideo.file"
          :key="currentVideo.id"
          :poster="currentVideo.videoImg"
          controls
        >
          <source :src="currentVideo.file" type="video/mp4" />
        </video>
      </div>

      <div class="right">
        <swiper
          :slidesPerView="3"
          centeredSlides
          loop
          @slideChange="slideChange"
          class="productDetail"
          :navigation="{
            nextEl: '.productDetail-button-next',
            prevEl: '.productDetail-button-prev',
          }"
          v-if="product?.length > 0"
        >
          <swiper-slide v-for="item in product" :key="item.id">
            <div class="productDetail-item">
              <router-link
                class="productDetail-link"
                :to="{ name: 'productDetail', query: { id: item.id } }"
              >
                <img class="productDetail-item-img" :src="item.images" />
                <div class="productDetail-item-label">
                  {{ item.name }}
                </div>
              </router-link>
            </div>
          </swiper-slide>

          <template #container-start>
            <div class="productDetail-button productDetail-button-next"></div>
            <div class="productDetail-button productDetail-button-prev"></div>
          </template>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import tabs from "./tabs.vue";

export default {
  components: { tabs },
  data() {
    return {
      data: [],
      productIndex: 0, //产品分类下标
      tabIndex: 0,
      swiper: null,
      product: [],
      // currentVideoimage: "",
      // currentVideo: "",

      search: "",
      video: { id: 0, file: "", image: "", videoImg: "" },
    };
  },

  computed: {
    currentVideo() {
      return this.video;
    },
  },
  mounted() {
    //默认显示第一条
    this.getData();
  },
  methods: {
    videoListener() {
      //    this.$refs.videoRef.addEventListener('play', () =>{

      // });
      this.$refs.videoRef.addEventListener("play", () => {
        console.log("video is playing");
      });
    },

    async getData() {
      try {
        const result = await this.$request.get("/Khindex/StarProductsNav");
        this.data = result.data;

        await this.getProduct(this.data[0]?.children[0]?.id);
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 获取产品
     */
    async getProduct(id) {
      try {
        const result = await this.$request.get("/Khindex/StarProducts", {
          params: {
            nav_id: id,
          },
        });
        //数据为1的情况 swiper loop循环有问题暂时没有想到好方法
        //加1
        if (result.data.length == 1) {
          result.data.push(result.data[0]);
        }
        this.product = result.data;

        this.$nextTick(() => {
          this.product = result.data;
          this?.swiper?.loopDestroy();
          this?.swiper?.loopCreate();
          this?.swiper?.update();

          //优先显示视频 次之海报-次之商品主图
          this.video.id = this.product?.[0]?.id;
          if (this.product?.[0]?.videofile) {
            this.video.file = this.product?.[0]?.videofile;
            this.video.videoImg = this.product?.[0]?.videoimages;
            //  this.videoListener();
          } else if (this.product?.[0]?.webimage) {
            this.video.image = this.product?.[0]?.webimage;
            this.video.file = "";
            this.video.videoImg = "";
          } else {
            this.video.image = this.product?.[0]?.images;

            this.video.file = "";
            this.video.videoImg = "";
          }
        });
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 跳产品详情页
     */
    toDetail(e) {
      this.$router.push({
        path: "/productDetail",
        query: {
          id: e.id,
        },
      });
    },

    searchBtn() {
      this.$router.push({
        name: "searchProduct",
        query: { search: this.search },
      });
    },
    /**
     *Tab1 成人药 儿童药点击事件
     */
    tabsChange(e) {
      this.tabIndex = e;
      //二级菜单标记为0
      this.productIndex = 0;
      this.getProduct(
        this.data?.[this.tabIndex]?.children?.[this.productIndex]?.id
      );
    },
    /**
     * 二级分类点击事件
     */
    tabsChildChange(e) {
      this.productIndex = e;
      this.getProduct(
        this.data?.[this.tabIndex]?.children?.[this.productIndex]?.id
      );
    },

    slideChange(e) {
      this.$nextTick(() => {
        this.video.id = this.product?.[e.activeIndex]?.id;
        //优先显示视频 次之海报-次之商品主图
        if (this.product?.[e.realIndex]?.videofile) {
          this.video.file = this.product?.[e.realIndex]?.videofile;
          this.video.videoImg = this.product?.[e.realIndex]?.videoimages;
        } else if (this.product?.[e.realIndex]?.webimage) {
          this.video.image = this.product?.[e.realIndex]?.webimage;
          this.video.file = "";
          this.video.videoImg = "";
        } else {
          this.video.image = this.product?.[e.realIndex]?.images;
          this.video.file = "";
          this.video.videoImg = "";
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.productRecommendMobile {
  display: none;
}

.productRecommendPc {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  background-image: url("~@/assets/image/home/recommend_bg.png");
  display: flex;
  width: 100%;
  height: 936px;
  flex-direction: column;
  align-items: center;

  .title {
    width: 300px;
    height: 100px;
    margin-top: 115px;
  }

  .tabs {
    margin-top: 45px;
  }

  .tabs-child {
    margin-top: 60px;
  }

  .search-box {
    margin-top: 48px;
    display: flex;
    width: 592px;
    height: 47px;
    align-items: center;

    .input-box {
      width: 386px;
      height: 48px;
      background: #ffffff;
      border: 1px solid #dfdfdf;
      border-radius: 24px;
      display: flex;
      height: 47px;
      align-items: center;

      .ic {
        margin-left: 10px;
        width: 47px;
        height: 47px;
      }

      .input {
        outline: none;
        padding-left: 10px;
        color: #030303;
        border: none;
        background-color: transparent;
        display: flex;
        align-items: center;
        width: 250px;
        height: 18px;
        font-size: 18px;
      }

      input::-webkit-input-placeholder {
        color: #c9c9c9;
      }
    }

    .btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      width: 184px;
      height: 48px;
      background: #ee7800;
      border-radius: 24px;
      color: #fff;

      &:active {
        background: rgba(210, 217, 236, 0.878);
      }
    }
  }

  .product-box {
    margin-top: 125px;
    display: flex;

    .left {
      @include fn.scale(510px);

      .img {
        @include fn.cover;
      }

      .video {
        @include fn.cover;
        outline: none;
      }
    }

    .right {
      margin-left: 7px;
      margin-top: 40px;
      width: 687px;
      height: 275px;
      box-sizing: border-box;

      .productDetail {
        height: 100%;

        ::v-deep(.swiper-wrapper) {
          .swiper-slide {
            transition: transform 200ms linear;
          }

          .swiper-slide-active {
            transform: scale(1.4);
          }

          .swiper-slide-active .productDetail-item-label {
            background-color: color.$base;
            color: #fff;
            border-color: transparent;
          }
        }

        &-button {
          width: 20px;
          height: 20px;
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
          cursor: pointer;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          z-index: 11;

          &-prev {
            left: 0;
            background-image: url("~@/assets/image/home/ic_left.png");
          }

          &-next {
            right: 0;
            background-image: url("~@/assets/image/home/ic_right.png");
          }
        }

        &-item {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;

          &-link {
            width: fit-content;
            display: block;
            margin: auto;
          }

          &-img {
            @include fn.scale(139px);
            margin: auto;
          }

          &-label {
            // @include fn.ellipsis;
            width: calc(139px - 20px * 2);
            height: 26px;
            line-height: 26px;
            padding: 0 20px;
            overflow: hidden;
            text-align: center;
            border: 1px solid #cac8c7;
            border-radius: 13px;
            margin: auto;
            margin-top: 11px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .productRecommendPc {
    display: none;
  }

  .productRecommendMobile {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("~@/assets/image/home/m_recommend_bg.png");
    display: flex;
    width: 100%;
    height: fn.rpx(1200);
    flex-direction: column;
    align-items: center;

    .scrollSide {
      display: block;
      width: 100%;
    }

    .title {
      width: fn.rpx(300);
      height: fn.rpx(100);
      margin-top: fn.rpx(60);
    }

    .tabs {
      margin-top: fn.rpx(45);
    }

    .tabs-child {
      margin-top: fn.rpx(60);
    }

    .search-box {
      margin-top: fn.rpx(48);
      display: flex;
      width: fn.rpx(592);
      height: fn.rpx(47);
      align-items: center;

      .input-box {
        width: fn.rpx(386);
        height: fn.rpx(48);
        background: #ffffff;
        border: 1px solid #dfdfdf;
        border-radius: fn.rpx(24);
        display: flex;
        height: fn.rpx(47);
        align-items: center;

        .ic {
          margin-left: fn.rpx(10);
          width: fn.rpx(47);
          height: fn.rpx(47);
        }

        .input {
          outline: none;
          padding-left: fn.rpx(10);
          color: #030303;
          border: none;
          background-color: transparent;
          display: flex;
          align-items: center;
          width: fn.rpx(250);
          height: fn.rpx(18);
          font-size: fn.rpx(18);
        }

        input::-webkit-input-placeholder {
          color: #c9c9c9;
        }
      }

      .btn {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: fn.rpx(23);
        width: fn.rpx(184);
        height: fn.rpx(48);
        font-size: fn.rpx(18);
        background: #ee7800;
        border-radius: fn.rpx(24);
        color: #fff;

        &:active {
          background: rgba(210, 217, 236, 0.878);
        }
      }
    }

    .product-box {
      margin-top: fn.rpx(50);
      display: flex;
      flex-direction: column;
      align-items: center;

      .left {
        width: fn.rpx(619);
        height: fn.rpx(348);

        .img {
          width: fn.rpx(619);
          height: fn.rpx(348);
        }

        .video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .right {
        margin-top: fn.rpx(40);
        width: fn.rpx(700);
        height: fn.rpx(300);

        .productDetail {
          height: 100%;

          ::v-deep(.swiper-wrapper) {
            .swiper-slide {
              transition: transform 200ms linear;
            }

            .swiper-slide-active {
              transform: scale(1.4);
            }

            .swiper-slide-active .productDetail-item-label {
              background-color: color.$base;
              color: #fff;
              border-color: transparent;
            }
          }

          &-button {
            width: fn.rpx(20);
            height: fn.rpx(20);
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            cursor: pointer;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            z-index: 11;

            &-prev {
              left: 0;
              background-image: url("~@/assets/image/home/ic_left.png");
            }

            &-next {
              right: 0;
              background-image: url("~@/assets/image/home/ic_right.png");
            }
          }

          &-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;

            &-link {
              width: fit-content;
              display: block;
              margin: auto;
            }

            &-img {
              @include fn.scale(fn.rpx(139));
              margin: auto;
            }

            &-label {
              padding: 0 fn.rpx(20);
              overflow: hidden;
              text-align: center;
              margin: auto;
              margin-top: fn.rpx(11);
              width: calc(fn.rpx(139) - fn.rpx(20) * 2);
              height: fn.rpx(30);
              line-height: fn.rpx(30);
              border: fn.rpx(1) solid #cac8c7;
              border-radius: fn.rpx(15);
              font-size: fn.rpx(18);
            }
          }
        }
      }
    }
  }
}
</style>